<!--vue模板-->
<template>
  <el-dialog
    :model-value="visible"
    title="选择产品"
    width="800"
    :close-on-click-modal="false"
    @close="cls"
  >
    <div>
      <el-input
        v-model="productName"
        placeholder="请输入产品名称"
        style="width: 200px"
      />
      <el-button type="primary" style="margin-left: 20px">搜索</el-button>
      <el-button type="info">重置</el-button>
    </div>

    <!--表格数据-->
    <el-table
      ref="productRef"
      :data="tableData"
      style="width: 100%"
      stripe
      border
    >
      <el-table-column
        type="selection"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column
        label="序号"
        type="index"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="code"
        label="产品编码"
        width="100"
        header-align="center"
      />
      <el-table-column
        prop="picurl"
        label="产品图片"
        width="180"
        header-align="center"
      >
        <template #default="{ row }">
          <img :src="path + row.picurl" /> </template
      ></el-table-column>
      <el-table-column
        prop="name"
        label="产品名称"
        width="100"
        header-align="center"
        align="center"
      />
      <el-table-column prop="price" label="价格" header-align="center" />
    </el-table>

    <!--分页-->
    <div style="height: 60px; line-height: 60px; background-color: #fff">
      <el-pagination
        background
        layout="sizes,total,prev, pager, next,jumper"
        :total="total"
        style="float: right; margin-right: 20px"
        @current-change="chpg"
        @size-change="chsize"
      />
    </div>

    <el-button type="primary" @click="sel">确定</el-button>
  </el-dialog>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { queryList } from "@/api/product/product.js";

//表格引用
const productRef = ref(null);
//表格数据
const tableData = ref([]);
//分页参数
const page = ref(1); //当前页数
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数

//改变当前页
function chpg(pg) {
  page.value = pg;
  init();
}
//改变每页记录数
function chsize(pgsize) {
  pageSize.value = pgsize;
  page.value = 1;
  init();
}

//定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

//响应式对象
const data = ref({
  code: "",
  name: "",
  picurl: ""
});
//声明事件
const emits = defineEmits(["close", "choose"]);
const productName = ref("");

//路径
const path = "http://localhost:8080";
//查询产品
async function initProduct() {
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    status: 1,
    name: productName.value
  };
  let res = await queryList(data);
  if (res.code == 200) {
    tableData.value = res.data.list;
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}

//--选择产品--
function sel() {
  let rows = productRef.value.getSelectionRows();
  emits("choose", rows);
  cls();
}

function clear() {
  if (productRef.value) productRef.value.clearSelection();
}

//方法
function cls() {
  //通知父组件  我要关闭了
  emits("close");
}

//富文本编辑器

onBeforeMount(() => {
  initProduct();
});

defineExpose({ clear });
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.root {
  width: 95vw;
  background-color: #fff;
  border-radius: 5px;
}
.basic {
  font-size: 24px;
  font-weight: bold;
  color: #0054a6;
  margin-left: 30px;
  margin-top: 20px;
  display: inline-block;

  border-style: none;
  border-left: #0054a6 solid 4px;
  padding-left: 10px;
}

:deep(.avatar-uploader .avatar) {
  width: 128px;
  height: 128px;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  text-align: center;
}
</style>
